<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" media="screen" href="css/smoothness/jquery-ui-1.9.0.custom.css" />	<!-- jqueryUI CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />							<!-- jqGrid CSS -->
<link rel="stylesheet" type="text/css" media="screen" href="css/selfTemplate.css" />						<!-- 本專案自行定義 CSS -->

<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>										<!-- jQuery 核心 -->
<script src="js/grid.locale-tw.js" type="text/javascript"></script>											<!-- jqGrid 語系檔 -->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>										<!-- jqGrid 核心 -->
<script src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>							<!-- jqueryUI 核心 -->
<script src="js/widgets.js" type="text/javascript"></script>												<!-- 本專案自行定義 JS -->
<script src="js/jquery.checkboxtree.min.js" type="text/javascript"></script>								<!-- CheckBox樹的 JS -->

<title>帳務研究所-交付申請 </title>

<script type="text/javascript">

/** 將此次交付所選的檔案，寫回分頁一**/
function addReqFileMixd() {
	$("#reqSelected")[0].value = "";	//先將選擇的需求值清空
	$("#forRemoveFileSelect").remove();	//將原本的選的檔案或Header清空
	
	$("#reqFileComp").css("visibility", "visible");
	$("#reqFileComp").dialog({
		resizable : true,
		width : 950,
		height : 700,
		modal : true,
		buttons : {
			"確定" : function() {	//將設定的檔案寫入交付清單
				
				//先寫入需求
				var reqid = $("#reqSelected")[0].value;
				var fileSelectSize = $("#fileReqMapping tr").size();
				var tmp = "";
				
				if (!$("#deliList").length){	/** 為了確保不會重複產生Header **/
					tmp = "<hr/><p><table border='1' id='deliList'><tr><th>&nbsp;</th><th>＃</th><th>需求編號</th><th>程式名稱</th><th class='english_font'>Ver</th><th>部署路徑</th><th>部署小組</th></tr></table>";
					$("#reqHook").append(tmp);	
				}
				
				
				var ind = $("#deliList tr button").size();	//為了清單上的流水號
				tmp = "<tr id='"+reqid+"' class='"+reqid+"'><td rowspan='"+(fileSelectSize-1)+"'><button type='button' onclick=\"removeDeliListItem('"+reqid+"')\">－</button></td><td class='center' rowspan='"+(fileSelectSize-1)+"'>"+(ind+1)+"</td><td rowspan='"+(fileSelectSize-1)+"'>"+reqid+"</td></tr>";
				$("#deliList").append(tmp);
				$("button").button();
				//再寫入程式
				$("#fileReqMapping tr").each(function(i,str) {
					if( i > 1) {
						tmp = "<tr class='"+reqid+"'>"+
						//程式名稱
						"<td class='english_font'>"+$("#fileReqMapping tr:nth-child("+i+") td:nth-child(3)")[0].innerHTML+"</td>"+
						//版次
						"<td class='right english_font'>"+$("#fileReqMapping tr:nth-child("+i+") td:nth-child(4) select option:selected")[0].innerHTML+"</td>"+
						//部署路徑
						"<td class='english_font'>"+$("#fileReqMapping tr:nth-child("+i+") td:nth-child(6) input")[0].value+"</td>"+
						//部署小組
						"<td>"+$("#fileReqMapping tr:nth-child("+i+") td:nth-child(8)")[0].innerHTML+"</td>"+
						"</tr>";
						$("#deliList").append(tmp);
					}
				});
				
				$(this).dialog("close");
			},"關閉" : function() {
				$(this).dialog("close");
			}
		}
	});
}


/** 輸入了查詢需求的條件，用來查詢需求 **/
function addReq(){
	$("#reqSelect").css("visibility", "visible");
	$("#reqSelect").dialog({
		resizable : true,
		width : 360,
		height : 450,
		modal : true,
		buttons : {
			"關閉" : function() {
				$("#reqSelectResult").css("visibility", "hidden");
				$(this).dialog("close");
			}
		}
	});
}

/** 輸入了查詢SVN的條件，用來查詢SVN	**/
function querySVN() {
	var tmp = "<img id='svnLoading' alt='讀取中...' src='pic/ajax-loader.gif'>";
	$("#fileSelectResult").append(tmp);
	$.post("QuerySVN",$("#q_form").serializeArray(),function(reses) {
		$("#svnLoading").remove();
		tmp = "<hr/><table><thead><tr><th>＃</th><th class='english_font'>File Name</th><th class='english_font'>Ver</th><th class='english_font'>SVN Path</th></tr></thead><tbody id='fileSelectResult_tb'></tbody></table>";
		$("#fileSelectResult").append(tmp);
		
		$("#fileSelectResult_tb tr").remove();
		$.each(reses,function(i, res) {
			var id = res.id;
			tmp = "<tr ondblclick=\"selectFile('"+id+"','"+res.home+"','"+res.ver+"')\"><td class='center'>"+(i+1)+"</td><td>"+id.replace('__','.')+"</td><td>"+res.ver+"</td><td>"+res.home+"</td></tr>";
			$("#fileSelectResult_tb").append(tmp);
		}); 
		refreshUI("fileSelectResult_tb",reses.size,false);
	},"JSON");
	
	$("#fileSelectResult").css("visibility", "visible");
}

/**	呼叫輸入查詢SVN條件的畫面 **/
function selectSVN() {
	$("#fileSelect").css("visibility", "visible");
	$("#fileSelect").dialog({
		resizable : true,
		width : 800,
		height : 500,
		modal : true,
		buttons : {
			"關閉" : function() {
				$(this).dialog("close");
			}
		}
	});
}

/** 移除交付清單內的項目 **/
function removeDeliListItem(tar) {
	$("."+tar).remove();
}

/** 移除清單內的檔案 **/
function removeFile(tar) {
	tar = tar.replace( new RegExp ( "/" , "gm" ), "\\/");
	$("#"+tar).remove();
	refreshUI("fileReqMapping","2",true);
}

/** 雙擊了SVN列出的檔案清單 **/
function selectFile(fileName,path,ver) {
	var selectFileSize = $("#fileReqMapping tr").size(); 
	var tmp = "<tr id='tr_"+path+"/"+fileName+"'><td class='center'><button type='button' onclick=\"removeFile('tr_"+path+"/"+fileName+"')\">-</button></td><td class='center' id=''>"+selectFileSize+"</td><td>"+fileName.replace('__','.')+"</td><td class='right'><select id='"+path+"/"+fileName+"'></select></td><td><input type='text' readonly='readonly' value='"+path+"'></td><td><input type='text' value=''></td><td><button type='button' onclick=\"selectSquad('ul_"+path+"/"+fileName+"')\">＊</button></td><td><ul id='ul_"+path+"/"+fileName+"'></ul></td></tr>";
	$("#fileReqMapping").append(tmp);
	tmp = path + "/"+fileName;
	tmp = tmp.replace( new RegExp ( "/" , "gm" ), "\\/");
	genOption(tmp,ver);
	refreshUI("fileReqMapping",selectFileSize,false);
}

function genOption(tar,ind) {
	for(i=ind;i>0;i--) {
		$("#"+tar).append("<option>"+i+"</option>");
	}
}


/** 雙擊了查詢出來的某需求 **/
function selectReq(reqid) {
	$("#reqSelected").attr("value",reqid);
	$("#reqSelectResult").css("visibility", "hidden");
	var tmp = "<div id='forRemoveFileSelect'><hr/><table id='fileReqMapping'><tr><th><button type='button' type='button' onclick='selectSVN()'>+</button></th><th>＃</th><th>檔名</th><th>版次</th><th>SVN路徑</th><th>部署路徑</th><th>&nbsp;</th><th>部署小組</th></tr></table></div>";
	$("#fileHook").append(tmp);
	$("#reqSelect").dialog("close");
}



function queryReq() {
	$("#getDataType")[0].value = "JSON";	//QueryReq 用 getDataType來判斷回傳的格式
	$.post("QueryReq",$("#q_form").serializeArray(),function(reses) {
		$("#reqSelectResult_tb tr").remove();
		$.each(reses,function(i, res) {
			var tmp = "<tr ondblclick=\"selectReq('"+res.id+"')\"><td class='center'>"+(i+1)+"</td><td>"+res.id+"</td></tr>";
			$("#reqSelectResult_tb").append(tmp);
		});
		refreshUI("reqSelectResult_tb",reses.size,false);
	},"JSON");
	
	$("#reqSelectResult").css("visibility", "visible");
}



/** 按下＊，要來選Squad **/
function selectSquad(tar){
	/** 把原本打開時就有的選項紀錄下來 **/
	tmpp=tar.replace( new RegExp ( "/" , "gm" ), "\\/");
	var selectedItem = $("#"+tmpp+" li");
	
	/** 至後端讀取可以勾選的選項 **/
	$.post("QuerySubsysSquad",$("#q_form").serializeArray(),function(reses) {
		$("#squadSelect_tb tr").remove();
		$.each(reses,function(i, res) {
			var checked = "";
			$(selectedItem).each(function(i,str) {
				if (str.innerHTML==(res.id+"-"+res.name)) {
					checked = "checked";
					return;
				}
			});
			var tmp = "<tr><td class='center'><input type='checkbox' subsys='"+res.id+"' squad='"+res.name+"' class='subsysSquad' "+checked+"></td><td>"+res.id+"</td><td>"+res.name+"</td></tr>";
			$("#squadSelect_tb").append(tmp);
		});
		refreshUI("squadSelect_tb",reses.size,false);
	},"JSON");
	
	$("#squadSelect").css("visibility", "visible");
	$("#squadSelect").dialog({
		resizable : true,
		width : 400,
		height : 350,
		modal : true,
		buttons : {
			"關閉" : function() {	//將畫面目前的勾選狀態寫回
				tar = tar.replace( new RegExp ( "/" , "gm" ), "\\/");
				$("#"+tar+" li").remove();
				$(".subsysSquad").each(function(i,res) {
					var isChecked = $(this).prop('checked');
					if (isChecked) {
						var squad = $(res).attr('squad');
						var subsys = $(res).attr('subsys');
						$("#"+tar).append("<li>"+subsys+"-"+squad+"</li>");		
					}
				});
				
				$("#squadSelect").css("visibility", "hidden");
				$(this).dialog("close");
			}
		}
	});
}

$(document).ready(function() {
	
	$("#tabs").tabs();
	$("#reqFileComp").css("visibility", "hidden");
	$("#reqSelect").css("visibility", "hidden");
	$("#reqSelectResult").css("visibility", "hidden");
	$("#squadSelect").css("visibility", "hidden");
	$("#fileSelect").css("visibility", "hidden");
	
	$("button").button();	
});
</script>

</head>
<body>
<div id="funcDisplay">
帳務研究所-交付申請
</div>
<form id="q_form">
	<input type="hidden" id="getDataType" name="getDataType" />
</form>
<input id="subsyses" type="hidden" >
<input id="isNotDuplicated" type="hidden" >

<br/>
<button type="button">提交</button>
<p>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">需求與程式設定</a></li>
        <li><a href="#tabs-3">選擇通知人員</a></li>
    </ul>
    <div id="tabs-1">
		<button type="button" onclick="addReqFileMixd()">新增</button><p>
		<div id="reqHook"></div>
    </div>
    
	<div id="tabs-3">
		<table>
			<tbody id="tBodyTPOwner">
				<tr bgcolor="#CCCCCC">
					<td><input type="checkbox" checked="checked" value="026312"></td>
					<td>1</td>
					<td>陳安民</td>
				</tr>
				<tr bgcolor="#FFFFFF">
					<td><input type="checkbox" checked="checked" value="029108"></td>
					<td>2</td>
					<td>邊曉虹</td>
				</tr>
				<tr bgcolor="#CCCCCC">
					<td><input type="checkbox" checked="checked" value="030906"></td>
					<td>3</td>
					<td>魏慶麟</td>
				</tr>
			</tbody>
		</table>
	</div>
	</div> <!-- fdafdasdf -->
	<div id="reqAdd" title="選擇需求"></div>

<div id="reqFileComp" title="創建需求與程式">
<label for="reqSelected">需求：</label>
<input type="text" id="reqSelected" readonly="readonly" value="" />&nbsp;&nbsp;<button type="button" onclick="addReq()">選擇</button>
<p/>
<div id="	fileHook"></div>

<div id="reqSelect" title="選擇需求" >
		<table>
			<tr>
				<td class="right"><label for="reqID_q">需求編號：</label></td>
				<td><input type="text" id="reqID_q" size="15" /></td>
			</tr>
			<tr>
				<td class="right">需求名稱：</td>
				<td><input type="text" size="15" /></td>
			</tr>
			<tr>
				<td class="right">需求描述：</td>
				<td><input type="text" size="15" /></td>
			</tr>
			<tr>
				<td class="right" colspan="2"><button type="button" onclick="queryReq()">submit</button></td>
			</tr>
			<tr>
				<td class="right" colspan="2" id="reqMes_q"></td>
			</tr>
		</table>
		<div id="reqSelectResult">
			<hr />
			<table>
				<thead>
					<tr>
						<th>＃</th>
						<th>需求編號</th>
					</tr>
				</thead>
				<tbody id="reqSelectResult_tb"></tbody>
			</table>
		</div>
	</div>
	<div id="squadSelect" title="選擇部署小組">
		<table>
			<thead>
				<tr>
					<th><input type="checkbox" id="subsysSquadCheckALL" onClick="chkALL('subsysSquad')"></th>
					<th>子系統</th>
					<th>部署小組</th>
				</tr>
			</thead>
			<tbody id="squadSelect_tb"></tbody>				
		</table>
	</div>
	<div id="fileSelect" title="選擇檔案">
		<label for="fileName_q" >檔案名稱：</label>
		<input type="text" name="fileName_q" id="fileName_q">&nbsp;<button type="button" onclick="querySVN()">查詢SVN</button><p>
		<div id="fileSelectResult">
		</div>
	</div>
</div>
</body>
</html>